<template>
	<view :class="currentTheme">
		<a-nabbar :name="status===1?'发车中':'完成测本'" />
		<view class="content">
			<!-- <view class=" u-padding-top-80">
				<view>
					<select-item v-model="driveCarName" :list="diverList" @getSelect="getSelect"
						v-if="diverList.length"></select-item>
				</view>
				<view class="content-desc-item u-font-36 u-text-center">
					{{status===1?'':'本次测本用时'}}
				</view>
			</view> -->
			<view class=" u-padding-top-80 u-margin-bottom-70">
				<!-- <view class="u-flex car-list">
					<select-item v-model="driveCarName" :list="diverList" @getSelect="getSelect"
						v-if="diverList.length"></select-item>
				</view> -->
				<view class="content-desc-item u-font-30 u-text-center">
					{{status===1?'':'本次测本用时'}}
				</view>
			</view>
			<view class="u-text-center time box-title">
				{{timerArr}}
			</view>
			<view class="u-flex u-row-center u-margin-top-80">
				<item-image :img="`${aliosCdn}/larp/common-${currentTheme}/car.png`" width="300" height="324"></item-image>
			</view>
			<view class="u-margin-top-54">
				<view v-if="status===1" class="u-font-30 content-desc-item u-text-center">
					测本进行中...
				</view>
				<view class="tips-box" v-if="status===2">
					<view class="u-margin-bottom-40 u-flex u-row-center" v-if="status===2">
						<u-icon name="laba" custom-prefix="custom-icon" size="50" color="#765CFE"></u-icon>
						<text class="text-color-txtTheme u-font-32 u-margin-left-32">注意咯！</text>
					</view>
					<view class="text-order-time u-font-26 u-text-center tips">
						<rich-text :nodes="pageObj.tips"></rich-text>
					</view>
				</view>
			</view>
			<!-- <view class=" u-padding-80">
				<view style="width: 350rpx;margin:0 auto 30rpx;">
					<select-item v-model="driveCarName" :list="diverList" @getSelect="getSelect"
						v-if="diverList.length"></select-item>
				</view>
				<view class="text-color-ccc u-font-36 u-text-center">{{diverList.length==0?driveCarName :''}}{{status===1?'测本进行中':'本次测本用时'}}</view>
			</view>
			<view class="time text-color-765CFE u-text-center">{{timerArr}}</view>
			<view class="tips-box">
				<view class="u-margin-bottom-40 u-flex u-row-center" v-if="status===2">
					<u-icon name="laba" custom-prefix="custom-icon" size="50" color="#765CFE"></u-icon>
					<text class="text-color-DEDEDE u-font-32 u-margin-left-32">注意咯！</text>
				</view>
				<view class="text-color-DEDEDE u-font-26 u-text-center tips">
					<rich-text :nodes="pageObj.tips"></rich-text>
				</view>
			</view> -->
			<view class="btns">
				<view v-if="status===2">
					<view v-if="isAuth=='issue'" class="u-flex u-row-center u-padding-left-32 u-padding-right-32">
						<item-btn @click="closePage" block height="88" >完成</item-btn>
					</view>
					<view v-else>
						<view class="u-flex u-row-between store-btns">
							<view class="u-flex-1" v-if="!form.isSubmitIntention"  >
								<item-btn width="100%" height="88" @click="want">提交意向</item-btn>
							</view>
							<view style="width: 46rpx;"  v-if="!form.isEvaluation && !form.isSubmitIntention" ></view>
							<view class="u-flex-1"  v-if="!form.isEvaluation">
								<item-btn width="100%" height="88" type="plain"  @click="reply">编辑评测</item-btn>
							</view>
						</view>
						<view class="u-text-center u-margin-top-50 u-font-28 content-desc-item" @click="endPage" v-if="!form.isSubmitIntention||!form.isEvaluation">以后再说</view>
						<view v-else class="u-flex u-row-center">
							<view>
								<item-btn @click="closePage" block height="88" >完成</item-btn>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="u-flex u-row-center">
					<view  v-if="isAuth=='issue'">
						<view class="u-text-center u-font-24 text-color-txtTheme u-margin-bottom-22">
							点击完成测本记录测本数据
						</view>
						<item-btn @click="endItem" block height="88" >完成测本</item-btn>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		add
	} from '@/api/crud.js'
	export default {
		data() {
			return {
				apiType: "driveCar",
				apiModule: 'shopApi',
				time: 0,
				timer: null,
				timerArr: '00:00:00',
				status: 1,
				id: 0,
				driveCarName: '',
				form: {},
				isReload: false,
				diverList: [],
				driverStr: ''
			};
		},
		computed: {
			isAuth() {
				return this.loginForm.userType || 'store'
			},
			pageObj() {
				return {
					issue1: {
						tips: '点击完成测本记录测本数据'
					},
					issue2: {
						tips: '提醒店家提交意向，快捷收集购本意向；<br />提醒店家编辑评测，有助于提升剧本曝光。'
					},
					store1: {
						tips: '待测本结束后，可提交意向、填写评测'
					},
					store2: {
						tips: '完善门店信息后，轻松一键提交意向<br />认真编辑评测，帮助你喜欢的好本提升剧本曝光'
					}
				} [`${this.isAuth}${this.status}`]
			}
		},
		onLoad({
			id
		}) {
			this.id = id;
			this.findCar()
			uni.$on('completeCar', this.getPageTime)
		},
		onUnload() {
			uni.$off('completeCar')
			this.clearTime()
			uni.removeStorageSync('setHrefFlag')
		},
		onShow() {
			this.getPageTime()
		},
		methods: {
			getSelect(arr) {
				const {
					value,
					label
				} = arr[0];
				this.id = value;
				this.getPageTime()
			},
			//查找当前剧本未发车辆
			findCar() {
				if (this.loginForm.uid) {
					add('', 'driveCar', this.apiModule, `getUserRunningCar/${this.loginForm.uid}`).then(res => {
						if (res.length > 1) {
							this.diverList = res.map(({
								name: label,
								id: value
							}) => ({
								label,
								value
							}));
						}
					})
				}
			},
			clearTime() {
				if (this.timer) {
					clearTimeout(this.timer)
					this.timer = null;
				}
			},
			getPageTime() {
				this.clearTime()
				add('', this.apiType, this.apiModule, `getRunTime/${this.id}`).then(res => {
					this.time = res.runTime / 1000;
					this.form = res;
					this.status = res.status
					this.driveCarName = res.driveCarName || '开车名称'
					res.status === 1 && this.timeout(); //测本中正在计时
					res.status === 2 && this.formatTime(this.time) //已完成
					setTimeout(() => {
						this.isReload = false
					}, 1000);
				})
			},
			formatTime(seconds) {
				// 小于等于0的话，结束倒计时
				let [day, hour, minute, second] = [0, 0, 0, 0];
				const hourNumber = 60 * 60;
				day = Math.floor(seconds / (hourNumber * 24));
				// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
				// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
				hour = Math.floor(seconds / hourNumber) - day * 24;
				// showHour为需要显示的小时
				let showHour = Math.floor(seconds / hourNumber);
				minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
				second = Math.floor(seconds) - day * 24 * hourNumber - hour * hourNumber - minute * 60;
				// 如果小于10，在前面补上一个"0"
				showHour = this.addZero(showHour);
				minute = this.addZero(minute);
				second = this.addZero(second);
				this.timerArr = [showHour, minute, second].join(':')
			},
			addZero(time) {
				return time < 10 ? '0' + time : time;
			},
			timeout() {
				this.formatTime(this.time)
				this.timer = setTimeout(() => {
					this.time += 1;
					this.timeout()
				}, 1000)
			},
			//完成测本
			endItem() {
				add('', this.apiType, this.apiModule, `completeCar/${this.id}`).then(res => {
					this.$u.toast('操作成功')
					this.getPageTime()
				})
			},
			//结束此次闭环
			endPage() {
				add(this.$store.getters.loginForm.uid + '', this.apiType, this.apiModule,
					`updateDriveCarUserTalkLater/${this.id}`).then(res => {
					this.$u.toast('操作成功')
					this.closePage()
				})
			},
			closePage() {
				uni.switchTab({
					url: '/pages/goOnLarp/goOnLarp'
				});
				// this.$u.route({type:'back'})
			},
			//评测
			reply() {
				this.$u.route({
					url: '/pagesA/userSubmit/userSubmit',
					params: {
						type: "settingTest",
						...this.form
					}
				})
			},
			//意向
			want() {
				this.$u.route({
					url: '/pagesA/want/setting',
					params: this.form
				})
			},
			//刷新
			refresh() {
				if (!this.isReload) this.getPageTime()
				this.isReload = true
			},
			//重新完成发车跳转页面的方法
			goLoading() {
				console.log(3666666666666)
				this.getPageTime()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.time {
		font-size: 110rpx;
		margin-top: 78rpx;
		letter-spacing: 20rpx;
	}
	.tips-box {
		margin-top: 51rpx;
	}

	.tips {
		line-height: 45rpx;
	}

	.btns {
		padding: 154rpx 0;
	}

	@keyframes time {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(720deg);
		}
	}

	.reload {}

	.reload-time {
		animation: time 2s;
		animation-iteration-count: 2;
		animation-fill-mode: forwards;
	}
	.store-btns{
		padding: 0 92rpx;
	}
	.car-list{
		margin:  0 auto;
		width: 443rpx;
		padding-bottom: 28rpx;
	}
</style>
